<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="/static/vue/vue.js"></script>
    <script src="/static/axios/axios.js"></script>
    <%--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--%>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>图书商城-注册</title>
</head>
<style>
    .from {
        width: 400px;
        height: 400px;

    }

    .login {
        color: cyan;
        font-size: large;
        font-family: '微软雅黑 Light', tahoma, 'hiragino sans gb', stheiti, 'wenquanyi micro hei', sans-serif;
    }

    .errMsg {
        color: red;
    }
</style>
<body>
<div id="app">
    <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1"><a href="/">首页</a></el-menu-item>
        <el-menu-item index="2"><a href="/goShoppingCart">购物车</a></el-menu-item>
        <el-menu-item index="3"><a href="/goUser">个人中心</a></el-menu-item>
    </el-menu>

    <el-row :gutter="20">
        <el-col :span="4">
            <div class="grid-content bg-purple"> &nbsp;</div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content bg-purple" align="center">
                <br><br>
                <span class="login">
                    图书商城 注册
                </span>
                <br><br><br>
                <div class="from">
                    <p>用户名：</p>
                    <input type="text" name="userName" v-model="user.userName">
                    <p>密码</p>
                    <input type="password" name="userPwd" v-model="user.userPwd">
                    <br><br>
                    <button type="success" @click="register">注册</button>
                    <button type="primary" ><a href="/goRegister">登录</a></button>
                    <div class="errMsg">{{message}}</div>
                </div>

            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content bg-purple"> &nbsp;</div>
        </el-col>
    </el-row>
</div>
<script type="application/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: "",
            user: {
                userName:'',
                userPwd:'',
            },
        },
        methods: {
            register() {
                axios.post(`/user/register`, {
                    "userName": this.user.userName,
                    "userPwd": this.user.userPwd,
                })
                    .then(res => {
                        if (res.data.code == 0) {
                            this.user = res.data.data
                        }
                        this.message = res.data.message
                        if (this.user.id != null) {
                            window.location.href="/"
                        }
                    })
            },
        }
    })
</script>
</body>
</html>